<template>
  <div>
    <el-card class="box-card" :body-style="{ padding: '0px' }">
      <div class="el-card__header">
        <div slot="header" class="clearfix">
          <span>机构信息</span>
        </div>
      </div>
      <div class="text item">
        <el-form ref="ruleForm" status-icon class="demo-ruleForm" :model="orgMessage">
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="机构编号" label-width="100px">
                <el-input v-model="orgMessage.id" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="机构名称" label-width="100px">
                <el-input v-model="orgMessage.name" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="机构类型" label-width="100px">
                <el-input v-model="orgMessage.type" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="机构地址" label-width="100px">
                <el-row :gutter="0">
                  <el-col :span="8"><el-input /></el-col>
                  <el-col :span="8"><el-input /></el-col>
                  <el-col :span="8"><el-input /></el-col>
                </el-row>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="详细地址" label-width="100px">
                <el-input v-model="orgMessage.address" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="经度" label-width="100px">
                <el-input v-model="orgMessage.longitude" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="纬度" label-width="100px">
                <el-input v-model="orgMessage.latitude" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="机构负责人" label-width="100px">
                <el-input v-model="orgMessage.managerName" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="机构电话" label-width="100px">
                <el-input v-model="orgMessage.phone" />
              </el-form-item>
            </el-col>
          </el-row>
          <div style="display: flex; justify-content: center">
            <el-button type="danger" @click="bianji">编辑</el-button>
          </div>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  props: {
    orgMessage: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
    }
  },
  methods: {
    bianji() {
      console.log(this.orgMessage)
    }
  }
}
</script>

<style lang="scss" scoped>
.box-card {
  .el-card__header {
    background-color: #fafafa;
    .clearfix {
      span {
        color: #2a2929;
        font-weight: 700;
        font-size: 16px;
      }
    }
  }
 .item{
     padding: 20px;
     .demo-ruleForm{
         margin-bottom: 22px;
     }
 }
}
.el-button{
    background: #e15536;
    border-radius: 4px;
    border-color: transparent;
    width: 89px;
    height: 36px;
    padding: 10px 20px;
}
</style>
